import Image from "next/image";
import classNames from "classnames";
import BGTitleImg from '@/app/assets/images/certificates/titleBg.png'
import ZZImg1 from '@/app/assets/images/certificates/zz1.png'
import ZZImg2 from '@/app/assets/images/certificates/zz2.png'
import styles from './index.module.css'

export default function ContentBottom() {
  return (
    <div className="flex items-center flex-col pt-10 pb-10">
      <div className="grid grid-cols-2 min-w-[1024px] max-w-screen-xl">
        <div className="flex justify-center">
          <div className="relative">
            <span className="text-[74px] text-gray-200 font-bold">ABOUT</span>
            <div className="h-[80px] w-[60px] absolute top-[50px] left-[100px]" style={{ backgroundImage: `url(${BGTitleImg.src})` }}></div>
            <h4 className="absolute top-[80px] left-[36px] whitespace-nowrap font-bold">计算机软件著作权</h4>
          </div>
        </div>
        <div className="flex justify-center">
          <div className="relative">
            <span className="text-[74px] text-gray-200 font-bold">ABOUT</span>
            <div className="h-[80px] w-[60px] absolute top-[50px] left-1/2" style={{ backgroundImage: `url(${BGTitleImg.src})` }}></div>
            <h4 className="absolute top-[80px] left-[66px] whitespace-nowrap font-bold">实用新型专利证书</h4>
          </div>
        </div>
      </div>
      <div className="flex justify-between w-full pt-20 pb-20 items-center">
        <div className={classNames("flex-1", styles.aboutWraper)}>
          <p>
            <span>疾控数据平台 </span>
            <span>实验室现场检测系统</span>
          </p>
          <p>
            <span>质量管理平台 </span>
            <span> 实验室智能化检测平台</span>
          </p>

          <p>
            <span>环保主数据平台 </span>
            <span> 实验室信息化管理系统</span>
          </p>
          <p>
            <span>客户关系管理平台  </span>
            <span> 实验室仪器设备管理系统</span>
          </p>
          <p>
            <span>仪器智能接口平台 </span>
            <span> 职业健康监护信息管理系统</span>
          </p>
          <p>
            <span>Lims实验室管理系统 </span>
            <span>......</span>
          </p>
        </div>
        <div className={classNames("flex-1", styles.aboutWraper)}>
          <p>
            <span>模板制作系统</span>
            <span>疾病预防信息服务平台</span>
          </p>
          <p>
            <span>水质污染检测平台 </span>
            <span> 液相色谱仪的纯水添加装置</span>
          </p>

          <p>
            <span>全自动石墨消解仪 </span>
            <span> 气相色谱仪的样品前处理装置</span>
          </p>
          <p>
            <span>气相柱温箱控开关  </span>
            <span> 实验室空气质量安全信息装置</span>
          </p>
          <p>
            <span>实验室仪器管理平台 </span>
            <span> 应用于企业的危险品管理方法及系统</span>
          </p>
          <p>
            <span>科学仪器连接管理库 </span>
            <span>......</span>
          </p>
        </div>
      </div>
      <div className="grid grid-cols-2 pt-10 pb-10 w-full">
        <div className="flex justify-center">
          <div className={classNames("w-[500px] h-[280px] overflow-hidden", styles.imgWraper)}>
            <Image src={ZZImg1} alt="" />
            <div className="h-full w-full flex justify-center items-center flex-col text-gray-100 p-5">
              <span className="text-[1.5rem] mb-1">计算机软件著作权（15项）</span>
              <p>疾控数据平台                     实验室现场检测系统               质量管理平台                     实验室智能化检测平台               环保主数据平台                   实验室信息化管理系统 客户关系管理平台                 实验室仪器设备管理系统 仪器智能接口平台                 职业健康监护信息管理系统 Lims实验室管理系统                ......</p>
            </div>
          </div>
          
        </div>
        <div className="flex justify-center">
          <div className={classNames("w-[500px] h-[280px] overflow-hidden", styles.imgWraper)}>
            <Image src={ZZImg2} alt="" />
            <div className="h-full w-full flex justify-center items-center flex-col text-gray-100 p-5">
              <span className="text-[1.5rem] mb-1">申请12项发明专利</span>
              <p> 模板制作系统                    疾病预防信息服务平台 水质污染检测平台                液相色谱仪的纯水添加装置 全自动石墨消解仪                气相色谱仪的样品前处理装置 气相柱温箱控开关                实验室空气质量安全信息装置 实验室仪器管理平台              应用于企业的危险品管理方法及系统 科学仪器连接管理库                 ......</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}